<template>
	<view class="container">
		<view class="refund-info-container" v-if="giftRecordList.length > 0">
			<view class="refund-info" v-for="(item,index) in giftRecordList" :key="index">
				<view class="refund-info-item">
					<text class="refund-info-item-title">客户名称：</text>
					<text class="refund-info-item-content">{{item.CustomerName}}</text>
				</view>
				<view class="refund-info-item">
					<text class="refund-info-item-title">赠送时间：</text>
					<text class="refund-info-item-content">{{item.CreateTime}}</text>
				</view>
				<view class="refund-info-item">
					<text class="refund-info-item-title">礼物名称：</text>
					<text class="refund-info-item-content">{{item.GiftName}} ×{{item.GiftCount}}</text>
				</view>
				<view class="refund-info-item">
					<text class="refund-info-item-title">支付金额：</text>
					<text class="refund-info-item-content">{{item.TotalGiftAmount}}</text>
				</view>
			</view>
		</view>
		<view v-else class="no-content">暂无礼物记录</view>
	</view>
</template>

<script>
	import {isLogin,toLogin} from '@/config/common.js'
	import {getAppServePlayerGiftList} from '@/constant/schedule.js'
	export default {
		data() {
			return {
				query_filter: {
					servePlayerId: uni.getStorageSync('customerId'),
					pageIndex: 0,
					pageSize: 10,
				},
				giftRecordList:[]
			}
		},
		onLoad() {
			if (isLogin()) {
				this.getGiftRecordList();
			} else {
				toLogin();
			}
		},
		onReachBottom() {
			this.query_filter.pageIndex++;
			this.getGiftRecordList()
		},
		onPullDownRefresh() {
			this.query_filter.pageIndex = 0;
			this.getGiftRecordList()
		},
		methods: {
			async getGiftRecordList() { //订单列表
				let res = await getAppServePlayerGiftList(this.query_filter);
				uni.stopPullDownRefresh()
				if (this.query_filter.pageIndex > 0) {
					for (let i = 0; i < res.Source.length; i++) {
						let obj = res.Source[i];
						this.giftRecordList.push(obj);
					}
				} else {
					this.giftRecordList = res.Source;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		background-color: $main-page-color;
		height: 100vh;
		// overflow-y: auto;
	}

	.refund-info-container {
		display: flex;
		flex-direction: column;
		.refund-info {
			background-color: #fff;
			min-height: 120rpx;
			margin-top: 20rpx;
			font-size: 28rpx;

			&-item {
				margin: 20rpx;

				&-content {
					color: #999;
				}
			}
		}
	}



	.no-content {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;
		width: 100%;
	}

	.search-icon {
		position: fixed;
		top: 20rpx;
		right: 20rpx;
		z-index: 1;
		width: 48rpx;
		height: 48rpx;
	}

	.game-tag-container {
		position: fixed;
		z-index: 999;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.4);

		&__body {
			background-color: #fff;
			width: 550rpx;
			height: 100vh;
			overflow-y: auto;
			position: absolute;
			right: 0;
			top: 0;
			font-size: 28rpx;
			animation: mymove 0.5s 1;

			&-title {
				margin: 20rpx;
				display: block;
			}
		}

		&__tag {
			margin-top: 20rpx;
			display: flex;
			flex-wrap: wrap;
		}

		&__item {
			font-size: 26rpx;
			padding: 10rpx 20rpx 10rpx 20rpx;
			border: 2rpx solid #dd524d;
			color: #dd524d;
			background-color: #fff;
			margin-left: 20rpx;
			margin-top: 20rpx;
			border-radius: 8rpx;
		}

		.selected-game-tag {
			background-color: #dd524d;
			color: #fff;
		}

		&__bottom {
			position: absolute;
			bottom: 20rpx;
			display: flex;
			z-index: 9999;
			font-size: 30rpx;
			width: 100%;
			justify-content: space-between;

			&-reset-btn {
				width: 150rpx;
				height: 70rpx;
				background-color: #dedede;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 8rpx;
				margin-left: 20rpx;
			}

			&-confirm-btn {
				width: 150rpx;
				height: 70rpx;
				background-color: $main-text-color-red;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				border-radius: 8rpx;
				margin-right: 20rpx;
			}
		}
	}

	@keyframes mymove {
		from {
			right: -200px;
		}

		to {
			right: 0;
		}
	}
	.picker {
		border: 2rpx solid $main-line-color-gray-DE;
		padding: 5rpx;
		font-size: 28rpx;
	}
</style>
